import React, { useState } from 'react'
import { ResultPage, Card, Popup, Space, Button, CalendarPickerView } from 'antd-mobile'
import dayjs from 'dayjs'
function App() {
  //控制弹出框的状态
  const [visible5, setVisible5] = useState(false)
  //获取日期转化
  const [kkdata,setKkdata]=useState(dayjs().format('YYYY-MM-DD'))
  //获取周几转化
  const [kkweek,setKkweek]=useState(dayjs().format('dddd'))
  //点击获取最新日期
  const kkk=(val)=>{
    setKkdata(dayjs(val).format('YYYY-MM-DD'))
    setKkweek(dayjs(val).format('dddd'))
    setVisible5(false)
  }
  return (
    <div>
      <ResultPage
        status=' '
        title='日期选择'
        description='日历限制选择范围为当前日期至当前日期后的10天'
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div onClick={() => {
            setVisible5(true)
          }}>
            <span>{kkdata}</span><span>{kkweek}</span>
          </div>
        </ResultPage.Card>
        <Popup
        //弹出框组件
          visible={visible5}
          onMaskClick={() => {
            setVisible5(false)
          }}
          bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            minHeight: '40vh',
          }}
        >
        <CalendarPickerView
          min={Date.now()}//当前日期
          max={Date.now()+10*24*60*60*1000}//最大10天
          onChange={(val)=>kkk(val)}//获取点击日期
        />
        </Popup>
      </ResultPage>
    </div>
  )
}

export default App